<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面向对象选项卡</title>
		<style type="text/css">
			*{
				margin: 0 ;
				padding: 0;
			}
			button{
				width: 80px;
				line-height: 30px;
				color: white;
				background-color: #E5E5E5;
				border: none;
			}
			.active{
				background-color: #0094EF;
			}
			div{
				width: 280px;
				height: 200px;
				color: white;
				text-align: center;
				line-height: 230px;
				font-size: 30px;
			}
			div:nth-child(4){
				background-color: bisque;
				display: block;
			}
			div:nth-child(5){
				background-color: powderblue;
				display: none;
			}
			div:nth-child(6){
				background-color: burlywood;
				display: none;
			}
		</style>
	</head>
	<body>
		<button class="active">按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<div>one</div>
		<div>two</div>
		<div>three</div>
	</body>
	<script type="text/javascript">
		var oBtn;
		var oDiv;
		window.onload=function(){
		 	oBtn=document.querySelectorAll("button");
			oDiv=document.querySelectorAll("div")
			fun1()
		}
		
		function fun1(){
			for (var i=0; i<oBtn.length;i++) {
				oBtn[i].index=i;
				oBtn[i].onclick=fun2;
			}
		}
		
		function fun2(){
			for (var i=0; i<oBtn.length;i++) {
				oBtn[i].className="";
				oDiv[i].style.display="none"
			}
			this.className="active";
			oDiv[this.index].style.display="block"
		}
	</script>
</html>
